<template>
  <div class="feedback">
    <!-- 头部组件 -->
    <Navbar title="留言反馈" />
    <!-- 图片查看器 -->
    <vue-preview :slides="thumImgs"></vue-preview>

    
    <!-- 评论组件 -->
    <!-- {{$route.query.id}} -->
    <!-- $route.query.id -->
    <Comment :cid="count" />
  </div>
</template>

<script>
export default {
  name: "MessageFeedback",

  data() {
    return {
      thumImgs: [
        {
         src: "https://s3.pfp.sina.net/ea/ad/2/4/447a2cc1850126c3b165f0446b910be0.jpeg",
         msrc: "https://s3.pfp.sina.net/ea/ad/2/4/447a2cc1850126c3b165f0446b910be0.jpeg",
         alt: 'picture1',
         title:  'img1',
         w: 600,
         h: 400
        },
        {
         src: "https://s3.pfp.sina.net/ea/ad/2/4/447a2cc1850126c3b165f0446b910be0.jpeg",
         msrc: "https://s3.pfp.sina.net/ea/ad/2/4/447a2cc1850126c3b165f0446b910be0.jpeg",
         alt: 'picture1',
         title:  'img1',
         w: 600,
         h: 400
        },
        {
         src: "https://s3.pfp.sina.net/ea/ad/2/4/447a2cc1850126c3b165f0446b910be0.jpeg",
         msrc: "https://s3.pfp.sina.net/ea/ad/2/4/447a2cc1850126c3b165f0446b910be0.jpeg",
         alt: 'picture1',
         title:  'img1',
         w: 600,
         h: 400
        }
      ],
      count: 0
    };
  }
};
</script>

/* // 这里的 scoped 表示只在当前组件起作用 （局部） */
<style lang="css" scoped>

</style>

<style>
figure {
  width: 30%;
  /* height: 200px; */
  display: inline-block;
  margin-left: 10px;
}
figure a{
  display: inline-block;
}
figure a img {
  width: 100px;
}
</style>